<template>
    <div class="main">
        <div class="container">

            <div class="login-box">
                <div class="form-box">
                    <h1 style="margin-bottom: 40px;">账号登录</h1>
                    <span style="margin-bottom: 20px;"> <el-input v-model="input" style="width: 240px"
                            placeholder="请输入账号" /></span>
                    <span style="margin-bottom: 20px;"> <el-input v-model="inputPassword" style="width: 240px" type="password" placeholder="请输入密码"
                            show-password /></span>

                            <span>
                                <el-button type="primary" @click="btn_register()">注册</el-button>
                                <el-button type="primary" @click="btn_login()">登录</el-button>
                            </span> 
                </div>

            </div>

        </div>
    </div>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import { login } from '../utils/axios';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import Cookies from 'js-cookie';
let router = useRouter()
let input = ref('')
let inputPassword = ref('')

function btn_login(){
    if(input.value == '' || inputPassword.value == ''){
        ElMessage.info("账号密码不能为空")
    }else{
        login(input.value,inputPassword.value).then(
            s  =>{
                if(s.data.code != 200){
                    //登录失败了
                    ElMessage.error("账号或密码错误!")
                }else{
                    ElMessage.success("登录成功")
                    // console.log(s);
                    // console.log("----");
                    Cookies.set('cookie-jwt', s.data.data.jwt, { expires: 1 / 2 });//有效期半天
                    router.push('/manage')
                }
            }
        ).catch(
            e=>{
                console.log("登录失败");
            }
        )
    }
}

function btn_register(){
    ElMessage.info("暂未开通注册功能，请联系管理员申请账号")
}


</script>

<style scoped>
.login-box {
    background-color: aqua;
    height: 38rem;
    display: flex;
    justify-content: center;
    align-items: center
}

.form-box {
    background-color: antiquewhite;
    height: 60%;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 10px 5px 5px 10px rgba(0, 0, 0, 0.5);
    border-radius: 20px;
}

/* 媒体查询(手机端) */
@media (max-width: 768px) {
    .form-box {
        width: 20rem;
        height: 18rem;
    }
}

/* 媒体查询（电脑端） */
@media (min-width: 769px) {}
</style>